<template>
	<view style="width:100%;height: 100%;">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="销售员面板" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view>
			<!-- 用户资料 -->
			<view class="user-card coreshop-bg-blue">
				<view class="card-top coreshop-flex coreshop-justify-between">
					<view class="coreshop-flex coreshop-align-center">
						<view class="head-img-box">
							<image class="head-img" :src="userInfo.avatarImage" mode=""></image>
						</view>
						<view class="coreshop-flex coreshop-flex-direction coreshop-align-start">
							<view class="user-name">{{ userInfo.nickName }}</view>
							<view class="user-info-box coreshop-flex coreshop-align-center">
								<view class="coreshop-flex coreshop-align-center" v-if="info.gradeName">
									<text class="cu-tag bg-purple sm radius">{{ info.gradeName }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="coreshop-flex coreshop-flex-direction coreshop-align-start">
						<view class="coreshop-flex coreshop-flex-direction coreshop-align-center">
							<view class="log-btn" @click="navigateToHandle(utilityMenus.balance.router)">明细</view>
							<view class="coreshop-margin-top-10" @click="onEye">
								<u-icon color="#fff" v-if="showMoney" name="eye-fill"></u-icon>
								<u-icon color="#fff" v-else name="eye-off"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="card-bottom coreshop-flex coreshop-justify-between">
					<view class="flex-sub coreshop-flex coreshop-flex-direction coreshop-align-start">
						<view class="item-title">已结算金额</view>
						<view class="item-detail">{{ showMoney ? info.settlementAmount || '0.00' : '***' }}</view>
					</view>
					<view class="flex-sub coreshop-flex coreshop-flex-direction coreshop-align-start"
						style="align-items: center;">
						<view class="item-title">待入账佣金</view>
						<view class="item-detail">{{ showMoney ? info.freezeAmount || '0.00' : '***' }}</view>
					</view>
					<view class="flex-sub coreshop-flex coreshop-flex-direction coreshop-align-start"
						style="align-items: flex-end;">
						<view class="item-title">本月订单数</view>
						<view class="item-detail">{{ showMoney ? info.currentMonthOrder || '0.00' : '***' }}</view>
					</view>
				</view>
			</view>

			<view class="coreshop-list menu card-menu">
				<view class="coreshop-list-item arrow" v-for="(menu, index) in utilityMenus" :key="index"
					@tap="navigateToHandle(menu.router)">
					<view class="content">
						<image :src="menu.icon" class="png" mode="aspectFit"></image>
						<text class="coreshop-text-grey">{{ menu.name }}</text>
					</view>
				</view>
				<!-- 分享二维码 -->
				<view class="coreshop-list-item arrow" @click="$u.throttle(createPoster, 500)">
					<view class="content">
						<image src="/static/images/distribution/distribution_icon7.png" class="png" mode="aspectFit">
						</image>
						<text class="coreshop-text-grey">专属二维码</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				showMoney: true, //是否显示金额
				siteName: this.$store.state.config.shopName,
				utilityMenus: {
					inviteCatalog: {
						name: '客户目录',
						icon: '/static/images/distribution/distribution_icon5.png',
						router: '/pages/member/agent/inviteCatalog/inviteCatalog'
					},
					invite: {
						name: '我的客户',
						icon: '/static/images/distribution/distribution_icon1.png',
						router: '/pages/member/agent/team/team'
					},
					balance: {
						name: '佣金明细',
						icon: '/static/images/distribution/distribution_icon2.png',
						router: '/pages/member/agent/commissionDetails/commissionDetails'
					},
					order: {
						name: '销售订单',
						icon: '/static/images/distribution/distribution_icon3.png',
						router: '/pages/member/agent/order/order'
					},

					// myStore: {
					//     name: '我的店铺',
					//     icon: '/static/images/distribution/distribution_icon4.png',
					//     router: '/pages/member/agent/myStore/myStore'
					// },
					// storeSetting: {
					//     name: '店铺设置',
					//     icon: '/static/images/distribution/distribution_icon5.png',
					//     router: '/pages/member/agent/storeSetting/storeSetting'
					// },
					ranking: {
						name: '销售排行',
						icon: '/static/images/distribution/distribution_icon6.png',
						router: '/pages/member/agent/rankings/rankings'
					},
					workPlan: {
						name: '工作计划',
						icon: '/static/images/distribution/distribution_icon8.png',
						router: '/pages/member/agent/workPlan/workPlan'
					},

					//shareLog: {
					//    name: '分享记录',
					//    icon: '/static/images/distribution/distribution_icon8.png',
					//    router: '/pages/member/agent/shareLog/shareLog'
					//},
				},
				info: {}, //分销商信息
				userInfo: {}, // 用户信息
				shareUrl: this.$globalConstVars.shareUrl
			}
		},
		onShow() {
			var _this = this;
			if (_this.$store.state.config.agentStore != '1') {
				delete this.utilityMenus.myStore;
				delete this.utilityMenus.storeSetting;
			}
			_this.$u.api.getAgentInfo().then(res => {
				if (res.status) {
					_this.info = res.data;
					if (res.data.verifyStatus != 1) { //审核通过
						_this.$u.route({
							type: 'redirectTo',
							url: '/pages/member/agent/index/index'
						});
					}
					if (_this.$store.state.config.agentStore == '1') {
						_this.utilityMenus.myStore.router = '/pages/member/agent/myStore/myStore?store=' + _this
							.info.store;
					}
					this.getShareUrl();

				} else {
					//报错了
					_this.$u.toast(res.msg);
				}
			});
		},
		onLoad() {
			this.initData()
		},
		methods: {
			// 是否显示金额
			onEye() {
				this.showMoney = !this.showMoney;
			},
			navigateToHandle(pageUrl) {
				this.$u.route({
					url: pageUrl
				})
			},
			initData() {
				// 获取用户信息
				var _this = this
				this.$u.api.userInfo().then(res => {
					if (res.status) {
						_this.userInfo = res.data
					}
				})
			},
			//去提现
			goWithdraw() {
				this.$u.route('/pages/member/balance/withdrawCash/withdrawCash')
			},
			//获取分享URL
			getShareUrl() {
				let data = {
					client: this.$globalConstVars.shareClient.wxMiNiProgram,
					url: this.$globalConstVars.shareUrl,
					type: this.$globalConstVars.shareModel.url,
					page: this.$globalConstVars.shareType.agent,
					params: {
						store: this.info.store
					},
				};
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					data['token'] = userToken;
				}
				this.$u.api.share(data).then(res => {
					this.shareUrl = res.data
				});
			},
			// 生成邀请海报
			createPoster() {
				let data = {
					client: this.$globalConstVars.shareClient.wxMiNiProgram,
					url: this.$globalConstVars.shareUrl,
					type: this.$globalConstVars.shareModel.poster, //poster
					params: {
						store: this.info.store
					},
					page: this.$globalConstVars.shareType.agent, //agent
				}
				let userToken = this.$db.get('userToken')
				if (userToken && userToken != '') {
					data.token = userToken
				}
				this.$u.api.share(data).then(res => {
					if (res.status) {
						data.params.posterUrl = res.data;
						data.params.shareType = this.$globalConstVars.shareType.agent;
						this.$u.route('/pages/share/sharePoster/sharePoster?poster=' + encodeURIComponent(res
							.data))
						// this.$u.route('/pages/share/shareNewPoster/shareNewPoster' + uni.$u.queryParams(data.params))
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
		},
		//分享
		onShareAppMessage(res) {
			return {
				title: this.$store.state.config.shareTitle,
				imageUrl: this.$store.state.config.shareImage,
				path: this.shareUrl
			}
		},
		onShareTimeline(res) {
			return {
				title: this.$store.state.config.shareTitle,
				imageUrl: this.$store.state.config.shareImage,
				path: this.shareUrl
			}
		},
	}
</script>
<style lang="scss" scoped>
	@import "panel.scss";
</style>